// webpack的配置文件
const { options } = require("less");
const { type } = require("os");
const path = require("path");
// 引入抽离css插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 引入css文件自动引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入css压缩插件
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
// 引入自动清除构建结构插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
// 引入构建结果分析插件
const aa = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// webpack只识别js和json文件，其他格式一律不认识
const config = {
  // 入口文件，需要打包的文件
  // entry:'./src/a.js',
  entry: "./src/app.js",
  // 打包环境，根据打包后的运行环境来加载不同的打包规则
  // development开发环境
  // production生产环境
  // mode: "production",
  // mode: "development",
  // 打包输出文件的路径和文件名，打包的文件放在哪，叫什么名字
  output: {
    // 路径
    path: path.resolve(__dirname, "dist"),
    // 文件名
    filename: "item.js",
    // 是否清空之前的dist目录中的文件
    clean: true,
  },
  // 打包文件的规则便于调试，是否可以定位到代码行
  devtool: "cheap-module-source-map",
  // 配置loader，用来对浏览器不认识的语法或文件，进行的转换
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            // 'css-loader'把css文件转换为js文件，'style-loader'把css转换后的文件引入到项目中
            // loader的加载顺序是从后往前执行
            use: [
              // "style-loader",
              MiniCssExtractPlugin.loader,
              "css-loader",
              // 解决css兼容问题
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
            ],
          },
          // 处理less文件
          {
            test: /\.less$/,
            use: [
              // "style-loader",
              MiniCssExtractPlugin.loader,
              "css-loader",
              // 解决css兼容问题
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
              "less-loader",
            ],
          },
          // 处理sass/scss文件
          {
            test: /\.s[ac]ss$/,
            use: [
              // "style-loader",
              MiniCssExtractPlugin.loader,
              "css-loader",
              // 解决css兼容问题
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
              "sass-loader",
            ],
          },
          // 处理图片
          {
            test: /\.(jpe?g|png|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 20 * 1024,
              },
            },
            generator: {
              filename: "static/images/[hash][ext][query]",
            },
          },
          // 处理字体图标文件
          {
            test: /\.(ttf|woff|woff2)$/,
            type: "asset/resource",
            generator: {
              filename: "static/images/[hash][ext][query]",
            },
          },
          // 处理js兼容问题
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              {
                loader: "thread-loader",
                options: {
                  // 开启新线程会耗费额外的时间，所以中小型项目没必要开启多线程
                  Workers: 3,
                },
              },
              {
                loader: "babel-loader",
                options: {
                  // 开启缓存
                  cacheDirectory: true,
                  cacheCompression: false,
                },
              },
            ],
          },
        ],
      },
    ],
  },

  // 把css抽离成单独的文件
  plugins: [
    new MiniCssExtractPlugin({
      filename: "static/css/app.css",
    }),
    // 自动引入css文件插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
    // 实例化css压缩插件
    new CssMinimizerWebpackPlugin(),
    // 实例化清除构建插件
    new CleanWebpackPlugin(),
    // 实例化构建结果分析插件
    new BundleAnalyzerPlugin({
      // 不启动展示打包的http服务器
      analyzerMode: "disabled",
      // 是否生成stats.js文件
      generateStatsFile: true,
    }),
  ],
  // 热更新
  // devServer: {
  //   // 本机域名 0.0.0.0代表本地ip地址
  //   host: "0.0.0.0",
  //   // 服务启动后自动打开浏览器
  //   open: true,
  //   // 服务端口
  //   port: 8080,
  //   hot: true,
  // },
  // 配置别名
  resolve: {
    // 路径别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    // 省略后缀名
    extensions: ["css", "js"],
  },
};
// 通过脚本命令的方式传入开发环境或者生产环境
config.mode = process.env.NODE_ENV;
// 如果是开发环境，使用开发环境开启http服务
if (config.mode === "development") {
  config.devServer = {
    host: "0.0.0.0",
    open: false,
    port: 8080,
    hot: true,
  };
}

console.log(process.env.NODE_ENV);
module.exports = config;
